<template>
  <view class="product-container">
    <view class="product-card">
      <view class="product-image">
        <image 
          :src="productData.image || 'http://www.dzgktf.com/templets/default/images/wtyt.jpg'" 
          :alt="productData.title"
          mode="aspectFill"
        />
      </view>
      
      <view class="product-info">
        <text class="product-title">
          {{ productData.title }}
        </text>
        
        <view class="product-badges">
          <text 
            v-for="(badge, index) in productData.badges" 
            :key="index"
            class="badge"
          >
            {{ badge }}
          </text>
        </view>
        
        <view class="sales-info">
          <text>已售{{ productData.sales }}</text>
        </view>
        
        <view class="price-section">
          <view class="price-info">
            <text class="current-price">¥{{ productData.currentPrice }}</text>
            <text class="price-label">起 券后价</text>
            <text v-if="productData.originalPrice" class="original-price">
              ¥{{ productData.originalPrice }}
            </text>
          </view>
          
          <button class="buy-button" @tap="handleBuy">
            购买
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

/**
 * 商品数据接口定义
 * @interface ProductData
 */
interface ProductData {
  /** 商品标题 */
  title: string
  /** 商品图片URL */
  image?: string
  /** 商品标签 */
  badges: string[]
  /** 销售数量 */
  sales: number
  /** 当前价格 */
  currentPrice: number
  /** 原价 */
  originalPrice?: number
}

/**
 * 组件Props定义
 * 接收商品详情数据，支持自定义样式和购买行为
 */
const props = defineProps<{
  /** 商品数据 */
  productData: ProductData
}>()

/**
 * 组件事件定义
 * 支持购买按钮点击事件向父组件传递
 */
const emit = defineEmits<{
  /** 购买按钮点击事件 */
  buy: [productData: ProductData]
}>()

/**
 * 处理购买按钮点击
 * 性能优化：使用事件委托，避免重复创建事件处理函数
 */
const handleBuy = () => {
  emit('buy', props.productData)
}
</script>

<style lang="scss">
.product-container {
  width: 750rpx;
  background: white;
  border-radius: 16rpx;
//   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 0 auto;
}

.product-card {
  display: flex;
//   padding: 20rpx;
  gap: 20rpx;
}

.product-image {
  width: 222rpx;
  height: 222rpx;
  flex-shrink: 0;
  
  image {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
  }
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.product-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}

.product-badges {
  display: flex;
  gap: 16rpx;
  flex-wrap: wrap;
}

.badge {
  padding: 4rpx 10rpx;
  border-radius: 8rpx;
  font-size: 20rpx;
  color: #666;
  border: 2rpx solid #e0e0e0;
}

.sales-info {
  color: #666;
  font-size: 20rpx;
}

.price-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.price-info {
  display: flex;
  align-items: baseline;
  gap: 16rpx;
  flex: 1;
}

.current-price {
  color: #ff4444;
  font-size: 28rpx;
  font-weight: bold;
}

.price-label {
  color: #666;
  font-size: 24rpx;
}

.original-price {
  color: #999;
  font-size: 28rpx;
  text-decoration: line-through;
}

.buy-button {
  background: linear-gradient(135deg, #ff6b4a, #ff8a65);
  color: white;
  border: none;
  border-radius: 12rpx;
  font-size: 24rpx;
  line-height: 40rpx;
  height: 40rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 8rpx rgba(255, 107, 74, 0.3);
}

.buy-button:active {
  background: linear-gradient(135deg, #ff5722, #ff7043);
  box-shadow: 0 8rpx 16rpx rgba(255, 107, 74, 0.4);
  transform: translateY(-2rpx);
}

</style>